<template>
  <view>
    <uni-nav-bar backgroundColor="linear-gradient(0deg, #597EF7 100%, #2F54EB 0%) !important"
                 color="#FFFFFF" title="设备管理" leftIcon="back" @clickLeft="goBack">
    </uni-nav-bar>
    <view
        style="background-color: #FFFFFF;padding: 0 20px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px">
      <uni-row>
        <uni-col :span="8">
          <view style="align-items: center">
            <image
                class="item-image"
                :src="'../../static/icon/device1.png'"
                mode=""
            ></image>
          </view>
        </uni-col>
        <uni-col :span="12">
          <view style="text-align: left; padding-top: 10px">
            设备名称
          </view>
          <view class="device-desc">
            设备ID：djajdfadjfadfa
          </view>
          <view class="device-desc">
            型号：djajdfadjfadfa
          </view>
          <view class="device-date">
            到期时间：2024/01/01
          </view>
        </uni-col>
        <uni-col :span="4">

          <view class="tag-container" style="padding-top: 10px">
            <uni-tag
                text="在线"
                type="success"
                size="mini"
                style="margin-bottom: 5px"
            />
            <uni-tag
                text="制冷"
                type="success"
                size="mini"
                style="margin-bottom: 5px"
            />
            <uni-tag
                text="正常"
                type="primary"
                size="mini"
            />
          </view>
        </uni-col>
      </uni-row>
      <uv-tabs
          :list="list"
          lineWidth="30"
          :current="current"
          lineColor="#2F54EB"
          :activeStyle="{
              color: '#2F54EB',
              fontWeight: 'bold',
              fontSize: '16px',
              transform: 'scale(1.05)',
            }"
          :inactiveStyle="{
              color: '#606266',
              transform: 'scale(1)',
            }"
          itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
          @click="changeTab"
      >
      </uv-tabs>
    </view>
    <view v-if="current === 1 || current === '1'">
      <view style="width:100%; height:500px">
        <l-echart ref="chartRef" @finished="init"></l-echart>
      </view>
    </view>
    <view v-if="current === 5 || current === '5'">
      <uv-grid :border="false" :col="2">
        <uv-grid-item
            :customStyle="{ padding: '10px' }"
            v-for="(item, index) in eventList"
            :key="index"
            @click="statusCheck(item)"
        >
          <image
              style="width: 120px;"
              :src="item.icon"
              mode="widthFix"
          >
          </image>
        </uv-grid-item>
      </uv-grid>
    </view>
  </view>
</template>

<script>
import $mqttTool from '@/utils/mqttTools.js';
// 插件内的 三选一
// import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
// // 自定义的 三选一 下载后放入项目的路径
// import * as echarts from 'xxx/echarts.min'
// npm包 三选一 需要在控制台 输入命令：npm install echarts
import * as echarts from 'echarts'

export default {
  data() {
    return {
      current: 0,
      eventList: [
        {
          id: 0,
          icon: '/static/icon/start.png',
          title: '系统开启',
        }, {
          id: 1,
          icon: '/static/icon/stop.png',
          title: '系统停止',
        }, {
          id: 2,
          icon: '/static/icon/s-snow.png',
          title: '强制化霜',
        }, {
          id: 3,
          icon: '/static/icon/s-cool.png',
          title: '强制制冷',
        },
      ],
      list: [
        {
          name: '实时',
        },
        {
          name: '曲线',
        },
        {
          name: '历史',
        },
        {
          name: '报警',
        },
        {
          name: '参数',
        },
        {
          name: '状态',
        },
      ],
      baseList: [
        {
          icon: '/static/icon/sssj.png',
          title: '实时数据',
          info: '123',
        },
      ],
      message: '',
      chartData: {},
      option: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['冷库温度', '化霜温度', 'A相电流', 'B相电流', 'C相电流'],
          bottom: 0
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '10%',
          top: '10%',
          containLabel: true
        },
        toolbox: {
          // feature: {
          //   saveAsImage: {}
          // }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['18:10:02', '18:10:02', '18:10:02', '18:10:02', '18:10:02', '18:10:02', '18:10:02']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '冷库温度',
            type: 'line',
            stack: 'Total',
            smooth: true,
            data: [-12, -13, -10, -13, -9, -23, -21]
          },
          {
            name: '化霜温度',
            type: 'line',
            stack: 'Total',
            smooth: true,
            data: [-22, -18, -19, -23, -29, -33, -31]
          },
          {
            name: 'A相电流',
            type: 'line',
            stack: 'Total',
            smooth: true,
            data: [15, 43, 20, 15, 19, 33, 41]
          },
          {
            name: 'B相电流',
            type: 'line',
            stack: 'Total',
            smooth: true,
            data: [22, 33, 20, 33, 39, 33, 32]
          },
          {
            name: 'C相电流',
            type: 'line',
            stack: 'Total',
            smooth: true,
            data: [62, 93, 30, 93, 129, 133, 132]
          }
        ]
      }
    }
  }
  ,
  onLoad(options) {
    this.current = options.id;

  }
  ,
  onReady() {
    // 页面准备就绪后的操作
    console.log("onReady")
    this.getServerData();
  }
  ,
  methods: {
    async init() {
      // chart 图表实例不能存在data里
      const chart = await this.$refs.chartRef.init(echarts);
      chart.setOption(this.option)
    },
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        let res = {
          categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
          series: [
            {
              name: "目标值",
              data: [35, 36, 31, 33, 13, 34]
            },
            {
              name: "完成量",
              data: [18, 27, 21, 24, 6, 28]
            }
          ]
        };
        this.chartData = JSON.parse(JSON.stringify(res));
      }, 500);
    }
    ,
    statusCheck(item) {
      console.log('statusCheck', item);
      if (item.id === 0) {
        this.message = '[{"id":"' + 'switch' + '","value":"' + 1 + '"}]';
      } else if (item.id === 1) {
        this.message = '[{"id":"' + 'switch' + '","value":"' + 0 + '"}]';
      }

      $mqttTool.publish('/41/D19O28377XY9/function-offline/post', this.message, '设备开关').then(res => {
        console.log(res);
        uni.showToast({
          title: '发布成功',
        });
      }).catch(res => {
        console.log(res);
        uni.showToast({
          title: '发布失败',
        });
      });
    }
    ,
    changeTab(e) {
      console.log('changeTab', e);
      this.current = e.index;
    }
    ,
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>


<style scoped lang="scss">
.content {
  background-color: #f0f0f0;
}

.item-image {
  width: 80px;
  height: 80px;
  border-radius: 15px;
  padding: 10px;
}

.tag-container {
  display: flex;
  flex-direction: column; /* 设置为竖直排列 */
  align-items: flex-start; /* 如果需要的话，可以设置对齐方式 */
}

.device-desc {
  text-align: left;
  font-size: 13px;
  color: #606266;
  padding-top: 5px;
}

.device-date {
  text-align: left;
  font-size: 12px;
  color: #606266;
  padding-top: 5px;
}

</style>
